<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <title>Document</title>
</head>

<body>
  <header>
    <span style="color: #5d5d5d;">订单提交成功请尽快付款！</span>
    <span>订单号：123465</span>
  </header>
  <div class="main">
    <div class="main_content">
  <div id="repay">返回</div>
  <div id="databox">
    <div style="height: 5vh"></div>
    <div class="Titletop">
      <!-- <div class="Title" id="quickpay">快捷支付</div> -->
      <div class="Title" id="b2cpay">网关支付B2C
        <div class="bluelist" id="bluelist1"></div>
      </div>
      <div class="Title" id="Scanningpay">扫码支付
        <div class="bluelist" id="bluelist2"></div>
      </div>
    </div>
    <hr />
    <div class="allform">
      <!-- <div class="quick">
            <div id="quick1">
              账户名称：张三<br /><br />&ensp;&ensp;&ensp; 卡号：<input
                id="payinput"
                placeholder="请输入卡号"
                type="text"
              />
              <br />
              <br />
              <input
                class="paybutton"
                id="Confirm"
                type="button"
                value="确认支付"
              />
            </div>
            <div id="quick2" style="display:none;">
              绑定银行卡已超过上限！
            </div>
          </div> -->

      <div class="b2c">
        <div id="b2c1">
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <img src="../img/zgyh.jpg" class="bankimg" />
          </div>
          <div class="bankbox">
            <a href="#" style="text-align: center;line-height: 4vh;color: #ccc;
    font-size: 14px;">更多银行</a>
          </div>
        </div>
        <div id="b2c2" style="display: none;">
          <div style="display: flex;margin-top: 3vh;">
            <div style="width: 137px;height: 35px;line-height: 35px;text-align: center">
              付款银行：
            </div>
            <div id="bankbox">
              <img src="../img/zgyh.jpg" class="bankimg" />
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <div style="width: 137px;height: 35px;line-height: 35px;text-align: center"></div>
            <div>
              <input type="radio" name="radio" checked />储蓄卡&ensp;&ensp;&ensp;&ensp;&ensp;
              <input type="radio" name="radio" />信用卡
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <div style="width: 137px;height: 35px;line-height: 35px;text-align: right"></div>
            <div>
              <input class="loginbank" type="button" value="登录到网上银行付款" />
            </div>
          </div>
          <div style="display: flex;margin-top: 10px;">
            <div style="width: 150px;height: 35px;line-height: 35px;text-align: center">
              <a href="#" class="orderpay">其他付款方式</a>
            </div>
          </div>
        </div>
      </div>

      <div class="Scanning" style="display: none;">
        <div id="Scanning1">
          <div style="margin-top: 50px;margin-left: 50px">
            <div id="spay1" class="scanningimg">
              <img src="../img/spay.jpg" alt="" width="60px" height="60px" />
            </div>
            <div style="text-align: center">银联二维码</div>
          </div>
          <div id="wpay1" style="margin-top: 50px;margin-left: 60px">
            <div class="scanningimg">
              <img src="../img/wpay.jpg" alt="" width="60px" height="60px" />
            </div>
            <div style="text-align: center">微信二维码</div>
          </div>
          <div id="zpay1" style="margin-top: 50px;margin-left: 60px">
            <div class="scanningimg">
              <img src="../img/zpay.jpg" alt="" width="60px" height="60px" />
            </div>
            <div style="text-align: center">支付宝二维码</div>
          </div>
        </div>
        <div id="Scanning2">
         <div class="spay">
           <div id="spay">
             <div style="margin-top: 100px;margin-left: 25px;">
               <div class="scanningimg">
                 <img src="../img/spay.jpg" alt="" width="60px" height="60px" />
               </div>
               <div style="width: 105px;text-align: center">
                 银联二维码
               </div>
               <div style="margin-top: 80px">
                 <a href="#" class="orderpay">其他付款方式</a>
               </div>
             </div>
             <div style="margin-top: 50px;margin-left: 60px">
               <div style="width: 300px;text-align: center;">
                 <img src="../img/QRcode.png" alt="" width="200px" height="200px" />
               </div>
               <div style="width: 300px;text-align: center;font-size: 9px;font-weight: bolder;margin-top: 5px">
                 请使用云闪付扫一扫，完成支付
               </div>
               <div style="width: 300px;text-align: center;font-size: 9px;;margin-top: 5px">
                 距离二维码过期还剩<span style="color: red">60</span>秒，过期后请刷新页面重新获取
               </div>
             </div>
           </div>
         </div>
         <div class="wpay">
           <div id="wpay">
             <div style="margin-top: 100px;margin-left: 25px;">
               <div class="scanningimg">
                 <img src="../img/wpay.jpg" alt="" width="60px" height="60px" />
               </div>
               <div style="width: 105px;text-align: center">
                 微信二维码
               </div>
               <div style="margin-top: 80px">
                 <a href="#" class="orderpay">其他付款方式</a>
               </div>
             </div>
             <div style="margin-top: 50px;margin-left: 60px">
               <div style="width: 300px;text-align: center;">
                 <img src="../img/QRcode.png" alt="" width="200px" height="200px" />
               </div>
               <div style="width: 300px;text-align: center;font-size: 9px;font-weight: bolder;margin-top: 5px">
                 请使用微信扫一扫，完成支付
               </div>
               <div style="width: 300px;text-align: center;font-size: 9px;;margin-top: 5px">
                 距离二维码过期还剩<span style="color: red">60</span>秒，过期后请刷新页面重新获取
               </div>
             </div>
           </div>
         </div>
          <div class="zpay">
            <div id="zpay">
              <div style="margin-top: 100px;margin-left: 25px;">
                <div class="scanningimg">
                  <img src="../img/zpay.jpg" alt="" width="60px" height="60px" />
                </div>
                <div style="width: 105px;text-align: center">
                  支付宝二维码
                </div>
                <div style="margin-top: 80px">
                  <a href="#" class="orderpay">其他付款方式</a>
                </div>
              </div>
              <div style="margin-top: 50px;margin-left: 60px">
                <div style="width: 300px;text-align: center;">
                  <img src="../img/QRcode.png" alt="" width="200px" height="200px" />
                </div>
                <div style="width: 300px;text-align: center;font-size: 9px;font-weight: bolder;margin-top: 5px">
                  请使用支付宝扫一扫，完成支付
                </div>
                <div style="width: 300px;text-align: center;font-size: 9px;;margin-top: 5px">
                  距离二维码过期还剩<span style="color: red">60</span>秒，过期后请刷新页面重新获取
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>
</body>

</html>
<script>
  // $("#quickpay").click(function() {
  //   $(".Title").css("border", "none");
  //   $("#quickpay").css("border-bottom", "3px solid #0080ff");
  //   $(".quick").css("display", "block");
  //   $(".Scanning").css("display", "none");
  //   $(".b2c").css("display", "none");
  //   $("#quick1").show();
  //   $("#quick2").hide();
  // });
  $("#b2cpay").click(function () {
    $("#bluelist1").css("display", "block");
    $("#bluelist2").css("display", "none");
    $("#Scanningpay").css("color", "#98989e");
    $("#b2cpay").css("color", "#52506b");

    $(".Scanning").css("display", "none");

    $(".b2c").css("display", "block");
    $("#b2c1").show();
    $("#b2c2").hide();
  });
  $("#Scanningpay").click(function () {

    $("#bluelist1").css("display", "none");
    $("#bluelist2").css("display", "block");
    $("#b2cpay").css("color", "#98989e");
    $("#Scanningpay").css("color", "#52506b");

    $(".Scanning").css("display", "block");
    $(".b2c").css("display", "none");
    $("#Scanning1").show();
    $("#Scanning2").hide();
  });

  // $("#Confirm").click(function() {
  //   $("#quick1").hide();
  //   $("#quick2").show();
  // });
  $(".bankbox").click(function () {
    $("#b2c1").hide();
    $("#b2c2").show();
  });
  $("#spay1").click(function () {
    $("#Scanning1").hide();
    $("#Scanning2").show();
    $(".spay").show();
    $(".wpay").hide();
    $(".zpay").hide();
  });
  $("#wpay1").click(function () {
    $("#Scanning1").hide();
    $("#Scanning2").show();
    $(".wpay").show();
    $(".spay").hide();
    $(".zpay").hide();
  });
  $("#zpay1").click(function () {
    $("#Scanning1").hide();
    $("#Scanning2").show();
    $(".zpay").show();
    $(".spay").hide();
    $(".wpay").hide();
  });
  $(".orderpay").click(function () {
    $("#Scanningpay").click();
  });
  $("#repay").click(function () {
    $(location).attr('href', './Selectivepay.html');
  });

</script>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  hr {
    width: 52.5vw;
  }
 header {
 height: 10vh;
 display: flex;
 align-items: center;
 justify-content: center;
 }

 .main {
 height: 90vh;
 padding: 50px;
 background: #f0f0ef;
 box-sizing: border-box;
 }

 .main_content {
 width: 80vw;
 margin: 0 auto;
 background: #fff;
 padding: 40px 150px;
 height: 100%;
 box-sizing: border-box;
 }
  #repay {
    float: right;
    height: 30px;
    width: 80px;
    margin-right: 7vw;
    margin-top: 6vh;
    color: #a3a3a3;
    border: 1px solid #bcbcbc;
    border-radius: 3px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }

#Scanningpay{
  color: #98989e;
}

  a {
    text-decoration: none;
    color: #05b6e8;
  }

.orderpay{
  color: #05b6e8;
}

  .head {
    width: 100%;
    height: 80px;
    text-align: center;
    background-color: #fff;
    line-height: 80px;
  }

  .databox {
    width: 80%;
    height: 80vh;
    background-color: #fff;
    margin-left: 10%;
    margin-top: 50px;
  }

  #databox {
    /* width: 60%; */
    height: 80vh;
    /* background-color: #c2c2c2; */
    margin-left: 10%;
  }

  .bluelist {
   width: 56px;
   height: 3px;
   background: #05b6e8;
   margin-left: 47px;
   margin-top: -1px;
  }

  #bluelist1 {
    display: block;
  }

  #bluelist2 {
    display: none;
  }

  .Titletop {
    display: flex;
    flex-direction: row;
  }

  .Title {
    width: 150px;
    height: 50px;
    font-size: 16px;
    /* border: 1px solid rgb(151, 144, 144); */
    border-radius: 4px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
  }

  .Title:hover {
    background: #e5e5e5;
  }

  .allform {
    width: 100%;
  }

  .quick {
    width: 100%;
    height: 200px;
    margin: 120px;
  }

  #payinput {
    width: 200px;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }

  .paybutton {
    width: 100px;
    height: 40px;
    font-size: 16px;
    background: #05b6e8;
    color: #fff;
    border-radius: 5px;
    margin-left: 150px;
    border: 1px solid #fff;
    cursor: pointer;
  }

  .loginbank {
    width: 180px;
    height: 35px;
    font-size: 16px;
    background: #04a3d0;
    color: #fff;
    border-radius: 5px;
    margin-left: 10px;
    border: 1px solid #fff;
    cursor: pointer;
  }

  #b2c1 {
    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */

    width: 90%;
    /* border: 1px solid black; */
    flex-wrap: wrap;
  }

  .bankimg {
    width: 100px;
    height: 35px;
    cursor: pointer;
  }

  .bankbox {
    height: 4vh;
    margin-top: 10px;
    margin-right: 6px;
    border: 1px solid #ccc;
    text-align: center;
    width: 10vw;
  }

  #bankbox {
    height: 4vh;
    cursor: pointer;

    border: 1px solid #ccc;
    text-align: center;
    width: 10vw;
  }

  .bankbox:hover {
    border: 1px solid #6fb7ff;
  }

  .scanningimg {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    border-radius: 15px;
    cursor: pointer;
  }

  .scanningimg img {
    margin: 20px;
  }

  .scanningimg:hover {
    border: 1px solid #05b6e8;
  }

  #Scanning1 {
    display: flex;
  }

  .spay {
    display: none;
  }

  .wpay {
    display: none;
  }

  .zpay {
    display: none;
  }

  #spay {
    display: flex;
  }

  #wpay {
    display: flex;
  }

  #zpay {
    display: flex;
  }

</style>
